<template>
  <section class="container">
    <div>
      <!-- <logo/> -->
      <!-- {{info.name}} -->
      <fixedHead  :prop="info.siteConfig"/>
      <div class="contener">
        <el-container>
        <el-main>
          <carousel :prop="info.carousel"/>
          <card :prop="info.topic"/>
          <tabNews :prop="info.category"/>
        </el-main>
        <el-aside width="300px">
          <tags></tags>
          <qrcode :prop="info.siteConfig"></qrcode>
          <photoShow></photoShow>
        </el-aside>
      </el-container>
      </div>
      <footers :prop="info.siteConfig"></footers>
      <!-- <ul>
        <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
        <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
        <li><nuxt-link :to="{name:'news-id',params:{newsId:3306,title:'嗡嗡嗡'}}">NEWS</nuxt-link></li>
      </ul> -->
    </div>
  </section>
</template>

<script>
import Logo from "~/components/Logo.vue";
import fixedHead from "~/components/module/fixedHead.vue";
import carousel from "~/components/module/carousel.vue";
import card from "~/components/module/card.vue";
import tabNews from "~/components/module/tabNews.vue";
import tags from "~/components/module/tags.vue";
import qrcode from "~/components/module/qrcode.vue";
import photoShow from "~/components/module/photoShow.vue";
import footers from "~/components/module/footer.vue";
import axios from 'axios'
export default {
  components: {
    Logo,
    fixedHead,
    carousel,
    card,
    tabNews,
    tags,
    qrcode,
    photoShow,
    footers
  },
  asyncData(){
      return axios.get('http://localhost:3333/index').then((res)=>{
        let data=res.data.data;
        for(let i=0;i<data.category.length;i++){
          var arr=[]
          for(var j=0;j<data.article.length;j++){
            if(data.article[j].categoryId==data.category[i]._id){
              arr.push(data.article[j])
            }
          }
          data.category[i].posts=arr;
        }
        console.log(data.siteConfig)
        return {info:data}
      },(err)=>{
        alert('error')
      }) 
  }
};
</script>

<style>
.contener{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
}
.el-container{
  width: 100%;
}
.el-aside {
    color: #333;
  
  }
  
  .el-main {
    color: #333;
  }
/* .container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
} */
</style>
